<template>
  <el-table
      :data="tableData"
      style="width: 100%"
      max-height="450"
      :border="true"
      :stripe="true">
    <el-table-column
        type="index"
        fixed
        label="编号"
        width="120">
    </el-table-column>
    <el-table-column
        prop="name"
        label="名称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="desc"
        label="描述"
        width="150">
    </el-table-column>
    <el-table-column
        prop="power"
        label="权限"
        align="center"
        :formatter="formatterPower">
    </el-table-column>
    <el-table-column
        label="操作"
        width="150">
      <template slot-scope="scope">
        <!-- scope 对应的是 当前这一行所对应的那一条数据 -->
        <el-button
            @click="edit(scope)"
            type="default"
            size="small">
          编辑
        </el-button>
        <el-button
            @click="deleteRow(scope)"
            type="danger"
            size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { deleteJob, getJoblist} from "../../../api/api";

export default {
  name: "job",
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getJoblist()
  },

  methods: {
    // 获取数据
    getJoblist() {
      getJoblist().then(data => {
        this.tableData = data.data
      })
    },
    // 删除数据
    deleteRow(obj) {
      // obj $index 对应的是这条数据索引
      // obj.row  对应的是这一条数据
      // this.tableData.splice(obj.$index,1)
      // 点击删除时要进行询问
      this.$confirm('此操作将永久删除该职务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定删除
        // 发送数据请求删除数据
        deleteJob(obj.row.id).then(data => {
          // 将这条数据从前端删除
          this.tableData.splice(obj.$index,1)
          // 删除成功后再给用户提示
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 将权限转换为汉语
    formatterPower(row) {
      let arr = row.power.split('|')

      arr.forEach(item => {
        switch (item) {
          case 'userhandle':
            item = '修改用户';
            break
          case 'departhandle':
            item = '修改部门';
            break
          default:
            break
        }
      })
      return arr.join('|')
    },
    // 更新用户
    edit(obj) {
      this.$router.push({
        path: '/org/addJob',
        query: {id:obj.row.id}
      })
    }
  }
}
</script>

<style scoped>

</style>
